import React from "react";
import {  Route, Link  } from "react-router-dom";
import TodoList from '../todolist'
import Xiaojiejie from '../xiao'
import Hooks from './hookspage'
import ReducerDemo from './hookspage/reducerDemo'
import Example6 from './useReducerEg/Example6'
import UseMemo from './useMemo/useMemo'
import UseRef from './useRef/useref'
import UseWinSize from './useWinSize/useWinSize'
import '../../routes/index.css'


function FirstPage(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/firstpage/todolist">todolist</Link></li>
                    <li><Link to="/firstpage/xiao">骁骑兵</Link></li>
                    <li><Link to="/firstpage/hooks">React Hooks</Link></li>
                    <li><Link to="/firstpage/reducerdemo">reducerdemo</Link></li>
                    <li><Link to="/firstpage/example6">Example6</Link></li>
                    <li><Link to="/firstpage/usememo">UseMemo</Link></li>
                    <li><Link to="/firstpage/useref">UseRef</Link></li>
                    <li><Link to="/firstpage/usewinsize">UseWinSize</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>首页</h3></div>
                <Route path="/firstpage/todolist/"   component={TodoList} />
                <Route path="/firstpage/xiao/"   component={Xiaojiejie} />
                <Route path="/firstpage/hooks/"   component={Hooks} />
                <Route path="/firstpage/reducerdemo/"   component={ReducerDemo} />
                <Route path="/firstpage/example6/"   component={Example6} />
                <Route path="/firstpage/usememo/"   component={UseMemo} />
                <Route path="/firstpage/useref/"   component={UseRef} />
                <Route path="/firstpage/usewinsize/"   component={UseWinSize} />
            </div>
        </div>
    )
}
export default FirstPage;